﻿
@{
    ViewBag.Title = "Main";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}
@section head{
    <link rel="stylesheet" href="~/Content/Panel/Main.css" media="all">
    <script src="~/Scripts/echarts.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=kSoIGIUPtwLnFbxKLyZfxKYa77SQpoXO"></script>
}

<div>
    <div class="headPanel">简报面板</div>
    <div class="headContent">
        <div class="hcm">
            <div class="hcml">
                <div class="layui-icon layui-icon-chart-screen" style="font-size:70px; color: #1E9FFF;"></div>
            </div>
            <div class="hcmr">
                <div class="hcmr top">
                    设备总数
                </div>
                <div class="hcmr bottom">
                    @ViewBag.SumNum
                </div>
            </div>
        </div>
        <div class="hcm">
            <div class="hcml">
                <div class="layui-icon layui-icon-cellphone-fine" style="font-size:70px; color: #1E9FFF;"></div>
            </div>
            <div class="hcmr">
                <div class="hcmr top">
                    在线设备
                </div>
                <div class="hcmr bottom">
                    @ViewBag.OnLineNum
                </div>
            </div>
        </div>
        <div class="hcm">
            <div class="hcml">
                <div class="layui-icon layui-icon-cellphone-fine" style="font-size:70px; color:slategray;"></div>
            </div>
            <div class="hcmr">
                <div class="hcmr top">
                    离线设备
                </div>
                <div class="hcmr bottom">
                    @ViewBag.OffLineNum
                </div>
            </div>
        </div>
        <div class="hcm">
            <div class="hcml">
                <div class="layui-icon layui-icon-log" style="font-size:70px; color:orangered;"></div>
            </div>
            <div class="hcmr">
                <div class="hcmr top">
                    超标设备
                </div>
                <div class="hcmr bottom">
                    @ViewBag.ExcessNum
                </div>
            </div>
        </div>
    </div>
</div>


<div>
    <div class="contentLeft">
        <div class="data_chart" style="position:relative;">
            <div id="main" style="width: 100%;height:450px;"></div>

        </div>
    </div>
    <div class="contentRight">
        <div style="width:100%;height:100%;position:relative;margin-top:10px;">
            <div style="width:100%;height:100%;position:relative" id="mapDetail">
            </div>
            <img style="position:absolute;left:0;bottom:0;width:80px;height:110px;" src="~/Content/Img/icon_lb.png" />
        </div>
    </div>
</div>
<div style="font-size:12px;margin-top:10px;margin-bottom:10px;margin-left:15px;width:100%;position: absolute;left: 0px;bottom: 0px;">
    ©2020 德器(重庆)科技有限公司|DEQI(CQ) TECHNOLOGY.CO.,LTD 服务热线 400-9019-505
    @*重庆环元环境科学研究院*@
</div>


<script type="text/javascript">
    var SUMData = [];
    var AvgData2 = [];  //通道2
    var myChart;
    var option;
    window.onload = function () {
        $.ajaxSettings.async = false;
        $.post("/Panel/GetBlowOffSUM", function (msg) {

            console.log(msg);
            //首先格式化归零数据
            for (var i = 0; i < msg.length; i++) {
                if (msg[i].Y == null || msg[i].V == null || msg[i].K == null) {
                    msg[i].Y = 0;
                    msg[i].V = 0;
                    msg[i].K = 0;
                }
            };
            SUMData = [];
            for (var i = 0; i < msg.length; i++) {
                var tempItem = { product: msg[i].DateHour, '油烟浓度': msg[i].Y, '非甲烷总烃': msg[i].V, '颗粒物': msg[i].K };
                SUMData.push(tempItem);
            }

        });
        $.ajaxSettings.async = true;

        initCharts();
        initMap();
        //if (ChannelNum == "2") {
        //    initCharts2();
        //}
    }


    //通道1的图表
    function initCharts() {
        myChart = echarts.init(document.getElementById('main'));
        option = {
            title: {
                text: "最近24小时排放总量",
                textStyle: {//标题内容的样式
                    fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                    fontWeight: "normal",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                    fontFamily: "san-serif",//主题文字字体，默认微软雅黑
                    fontSize: 18,//主题文字字体大小，默认为18px
                },
                left: 'center',
                top: '20px',
            },
            legend: {
                bottom: 0,
                orient: 'horizontal'
            },
            tooltip: {},
            dataset: {
                dimensions: ['product', '油烟浓度', '非甲烷总烃', '颗粒物'],
                source: SUMData,
                //source: [
                //    { product: '0', '油烟浓度': 0.5, '颗粒物浓度': 1, '非甲烷': 0.75 },
                //    { product: '1', '油烟浓度': 1, '颗粒物浓度': 0.5, '非甲烷': 0.75 },
                //    { product: '2', '油烟浓度': 0.75, '颗粒物浓度': 1, '非甲烷': 0.5 },
                //]
            },
            xAxis: { type: 'category', name: 'h' },
            yAxis: {
                name: '(mg/m³)'
                //max: 15
                //axisLabel:'(mg/m³)'
            },
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                { type: 'bar' },
                { type: 'bar' },
                { type: 'bar' }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>



<script type="text/javascript">

    var now = new Date();
    var map;
    now.setHours(now.getHours() - 1);
    var DeviceListJson = JSON.parse('@Html.Raw(ViewBag.DeviceDataJson)');
    var DeviceListArray = [];






    var opts1 = {
        width: 220,     // 信息窗口宽度
        height: 120,     // 信息窗口高度
        title: "设备信息", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    var opts2 = {
        width: 220,     // 信息窗口宽度
        height: 220,     // 信息窗口高度
        title: "设备信息", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };

    function initMap() {
        // 百度地图API功能
        map = new BMap.Map("mapDetail");
        var IconGray = new BMap.Icon("/Content/Img/icon_1.png", new BMap.Size(32, 32)); //第二个参数为图标大小
        var IconGreen = new BMap.Icon("/Content/Img/icon_2.png", new BMap.Size(32, 32));
        var IconRed = new BMap.Icon("/Content/Img/icon_3.png", new BMap.Size(32, 32));


        var point = new BMap.Point(106.302201, 29.403473);
        map.centerAndZoom(point, 11);
        map.enableScrollWheelZoom();
        map.setMapStyleV2({
            styleId: '116436b35bdb4c1508eea8a5552d0ae2'
        });



        for (var i = 0; i < DeviceListJson.length; i++) {
            DeviceListArray.push(DeviceListJson[i].DeviceId);
            //这里需要查找其他相似的数组
            for (var j = i + 1; j < DeviceListJson.length; j++) {
                if (DeviceListJson[j].lon == DeviceListJson[i].lon && DeviceListJson[j].lat == DeviceListJson[i].lat) {
                    //表明找到相等的,把这个弄进来
                    DeviceListArray.push(DeviceListJson[j].DeviceId);
                    //然后需要在原数组内删除掉弄进来的这个元素
                    DeviceListJson.splice(j, 1);
                }
            }

            point = new BMap.Point(DeviceListJson[i].lon, DeviceListJson[i].lat);
            var marker;
            var LastTime = new Date(Date.parse(DeviceListJson[i].LastTime))
            if (LastTime > now) {
                marker = new BMap.Marker(point, { icon: IconGreen });
            }
            else {
                marker = new BMap.Marker(point, { icon: IconGray });
            }

            var InfoContent = "<p>设备名称：" + DeviceListJson[i].Name + "</p>";
            InfoContent += "<p>地址：" + DeviceListJson[i].Address + "</p>";
            if (DeviceListJson[i].ChannelNum == 1) {
                InfoContent += "<p>油烟浓度：" + DeviceListJson[i].Y1 + "</p>";
                InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i].V1 + "</p>";
                InfoContent += "<p>颗粒物：" + DeviceListJson[i].K1 + "</p>";
            }
            else {
                InfoContent += "通道1：";
                InfoContent += "<p>油烟浓度：" + DeviceListJson[i].Y1 + "</p>";
                InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i].V1 + "</p>";
                InfoContent += "<p>颗粒物：" + DeviceListJson[i].K1 + "</p>";
                InfoContent += "通道2：";
                InfoContent += "<p>油烟浓度：" + DeviceListJson[i].Y2 + "</p>";
                InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i].V2 + "</p>";
                InfoContent += "<p>颗粒物：" + DeviceListJson[i].K2 + "</p>";
            }

            map.addOverlay(marker);              // 将标注添加到地图中
            addClickHandler(InfoContent, DeviceListJson[i].ChannelNum, marker);
            DeviceListArray = [];
        }


    }

    function addClickHandler(InfoContent, ChannelNum, marker) {
        marker.addEventListener("click", function (e) {
            openInfo(InfoContent, ChannelNum,e)
        });
    }

    function openInfo(InfoContent, ChannelNum, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow;
        if (ChannelNum == 1) {
            infoWindow = new BMap.InfoWindow(InfoContent, opts1);
        }
        else {
            infoWindow = new BMap.InfoWindow(InfoContent, opts2);

        }
        map.openInfoWindow(infoWindow, point);

    }



</script>










